<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/enroll.css">
    <link rel="stylesheet" href="./css/reset.css">
</head>

<body>
    <!-- 最顶部 -->
    <div class="roof"></div>
    <!-- 头部 -->
    <div class="h-top"></div>
    <!-- 广告图 -->
    <div class="login">
        <div class="container">
            <div class="login-box">
                <div class="login-tabs">
                    <li class="login-account">
                        账号注册
                    </li>
                    <li class="login-wx">
                        邮箱账号注册
                    </li>
                </div>
                <!-- 账号注册 -->
                <div id="form1">
                    <a href="" class="toggle-opt">
                        手机验证码登录
                    </a>
                    <div class="input-box">
                        <input id="UserName" name="UserName" type="text" placeholder="请输入手机号">
                    </div>
                    <div id="Tips">

                    </div>
                    <div class="input-box" id="passW">
                        <input id="PassWord" name="UserName" type="password" placeholder="请输入密码">
                    </div>
                    <div id="pass" style="color: rgb(235, 122, 17);">
                    </div>
                    <div class="input-box">
                        <input id="password" name="UserName" type="text" placeholder="请输入短信验证码">
                        <span class="getcode">获取验证码</span>
                    </div>
                    <input class="form-btn login-btn" type="button" id="dosubmit" value="注册">
                </div>
                <div class="bottom-box">
                    <ul class="other-login-ways">
                        <li class="login-qq">
                            <a href="">
                                <span>QQ</span>
                            </a>
                        </li>
                        <li class="login-qq">
                            <a href="">
                                <span>支付宝</span>
                            </a>
                        </li>
                        <li class="register">
                            <a href="./register.html">
                                <span>登录账号></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部导航 -->
    <div class="ft-nav"></div>
    <!-- 通用尾部 -->
    <footer class="foot"></footer>
</body>
<script src="./libs/jquery.2.2.4.js"></script>
<!-- <script src="./js/Account.js"></script> -->
<script>
    var Acc = document.querySelector("#UserName");
    var Tips = document.querySelector("#Tips")
    var box = document.querySelector(".input-box")
    var forBtn = document.querySelector("#dosubmit")
    // 账号正则
    var reg = /^1[3|4|5|6|7|8|9]\d{9}$/;
    // 密码正则
    var regs = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`·！……（）——+《》？“：「」】【、￥!,@#$%^&*?_\\>\\<\~\;\:\=\[\]\{\}\(\)\+\\\/\?\.\|\-])[A-Za-z\d`·！……（）——+《》？“：「」】【、￥!,@#$%^&*?_\\>\\<\~\;\:\=\[\]\{\}\(\)\+\\\/\?\.\|\-]{8,20}/
    // 前端的手机号验证
    Acc.addEventListener("blur", function () {
        if (reg.test(Acc.value)) {
            Tips.style.display = "block"
            Tips.style.color = "green";
            Tips.innerHTML = "√手机号正确";
            box.style.border = "1px solid green";
        } else {
            Tips.innerHTML = "×手机号格式错误";
            Tips.style.color = "red";
            box.style.border = "1px solid red";
            Tips.style.display = "block"
        }
    })
    // 前端的密码验证
    $("#PassWord").on("blur", function () {
        if (regs.test($("#PassWord").val())) {
            $("#pass").html("√密码安全")
            $("#pass").css({ color: "green" })
            $("#passW").css({ border: "1px solid green" })
        } else {
            $("#pass").html("请使用字母、数字和字符三种组合，8-20个字符")
            $("#passW").css({ border: "1px solid red" })
        }
    })
    // 注册
    $("#dosubmit").click(function () {
        // 判断账号
        if (reg.test(Acc.value)) {
            Tips.style.display = "block"
            Tips.style.color = "green";
            Tips.innerHTML = "√手机号正确";
            box.style.border = "1px solid green";
            if (regs.test($("#PassWord").val())) {
                $.ajax({
                    url: "http://localhost:3000/api",
                    data: {
                        type: "register",
                        username: $("#UserName").val(),
                        password: $("#PassWord").val(),
                    },
                    success: res => {
                        res = JSON.parse(res)
                        // 判断用户名是否重复
                        if (res.code === 0) {
                            const UserName = document.querySelector("#UserName")
                            const Tips = document.querySelector("#Tips")
                            $("#Tips").html("用户名重复");
                            $("#Tips").css({ color: "red" });
                            box.style.border = "1px solid red"
                            UserName.addEventListener("input", function () {
                                Tips.style.display = "none"
                            })
                            $("#UserName").val("")
                            $("#UserName")[0].focus()

                        } else if (res.code === 1) {
                            if (confirm("注册成功,是否跳转到登录页面")) {
                                location.href = "./register.html"
                            }
                        }
                    }
                })
            } else {
                console.log(2);
                $("#pass").html("请使用字母、数字和字符三种组合，8-20个字符")
                $("#passW").css({ border: "1px solid red" })
            }
        } else {
            $("#pass").html("请使用字母、数字和字符三种组合，8-20个字符")
            $("#passW").css({ border: "1px solid red" })
            Tips.innerHTML = "×手机号格式错误";
            Tips.style.color = "red";
            box.style.border = "1px solid red";
            Tips.style.display = "block"
        }
    })
</script>
<script>
    $(".foot").load("http://localhost:3000/html/Common_style.html .foot")
    $(".ft-nav").load("http://localhost:3000/html/Common_style.html .footer-nav")
    $(".roof").load("http://localhost:3000/html/Common_style.html .site-nav")
    $(".h-top").load("http://localhost:3000/html/Common_style.html .h-top");
</script>

</html>